<template>
  <div class="address-add-container">
    <!-- 表单区域 -->
    <div class="form-container">
      <!-- 收货人 -->
      <div class="form-item">
        <div class="form-label">收货人</div>
        <input
          type="text"
          class="form-input"
          placeholder="请输入收货人姓名"
          v-model="addressForm.consignee"
        />
      </div>

      <!-- 联系电话 -->
      <div class="form-item">
        <div class="form-label">联系电话</div>
        <input
          type="tel"
          class="form-input"
          placeholder="请输入收货人联系电话"
          v-model="addressForm.mobile"
        />
      </div>

      <div class="form-item">
        <div class="form-label required">所属地区</div>
        <div class="form-select" @click="selectRegion">
          <text class="form-select-text">{{
            (addressForm.region && addressForm.region.join("-")) ||
            "请选择省-市-区"
          }}</text>
          <text class="gui-block-text gui-icons select-arrow">&#xe69e;</text>
        </div>
      </div>

      <div class="form-item">
        <div class="form-label required">详细地址</div>
        <!-- <text class="form-select-text address-text">{{
          addressForm.address || "请选择详细地址"
        }}</text> -->
        <input
          class="form-select-text address-text"
          v-model="addressForm.address"
          placeholder="请输入详细地址"
        />
        <div class="location-btn" @click="getLocation">定位</div>
      </div>
    </div>
    <gui-area-picker
      :value="addressForm.region"
      ref="areaPickerRef"
      @confirm="confirmRegion"
    />

    <!-- 底部保存按钮 -->
    <div class="footer">
      <button class="save-btn" @click="saveAddress">确定</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { showToast } from "@/utils/helper";
import {
  addAddress,
  getAddressDetail,
  editAddress,
  getAddressDetailForC,
  addAddressForC,
  editAddressForC,
} from "@/apiShop/address";
import { onLoad } from "@dcloudio/uni-app";
// 地址表单数据
const addressForm = reactive({
  id: "",
  consignee: "",
  mobile: "",
  province: "",
  region: "",
  city: "",
  area: "",
  address: "",
});

const rules = ref({
  consignee: { required: true, msg: "请输入收货人姓名" },
  mobile: {
    required: true,
    msg: "请输入联系电话",
    other: /^1[3-9]\d{9}$/,
    otherMsg: "请输入正确的联系电话",
  },
  region: { required: true, msg: "请选择所属地区" },
  address: { required: true, msg: "请输入详细地址" },
});

const checkRules = () => {
  for (let key in rules.value) {
    if (rules.value[key].required && !addressForm[key]) {
      showToast(rules.value[key].msg);
      return false;
    } else if (rules.value[key].required && addressForm[key]) {
      if (
        rules.value[key].other &&
        !rules.value[key].other.test(addressForm[key])
      ) {
        showToast(rules.value[key].otherMsg);
        return false;
      }
    }
  }
  return true;
};
// 获取位置
const getLocation = () => {
  uni.chooseLocation({
    type: "gcj02",
    success: (res) => {
      addressForm.address = res.address;
    },
  });
};

const confirmRegion = (res) => {
  addressForm.region = res.names;
  addressForm.province = res.names[0];
  addressForm.city = res.names[1];
  addressForm.area = res.names[2];
};

const areaPickerRef = ref(null);
// 选择地区
const selectRegion = () => {
  // 这里可以调用地区选择器
  areaPickerRef.value.open();
};

// 保存地址
const saveAddress = async () => {
  const res = checkRules();
  if (!res) return;
  console.log("保存地址", addressForm, user_id.value);
  // 这里预留保存地址的逻辑
  if (addressForm.id) {
    !user_id.value
      ? await editAddress(addressForm)
      : await editAddressForC({
          ...addressForm,
          user_id: user_id.value,
        });
  } else {
    !user_id.value
      ? await addAddress(addressForm)
      : await addAddressForC({
          ...addressForm,
          user_id: user_id.value,
        });
  }
  showToast("保存成功");
  uni.navigateBack();
};
const user_id = ref("");
onLoad((options) => {
  if (Number(options.user_id)) {
      user_id.value = options.user_id;
    }
  if (options.id) {
    !user_id.value
      ? getAddressDetail({ id: options.id }).then((res) => {
          Object.assign(addressForm, res);
          addressForm.region = [
            addressForm.province,
            addressForm.city,
            addressForm.area,
          ];
        })
      : getAddressDetailForC({ id: options.id, user_id: user_id.value }).then(
          (res) => {
            Object.assign(addressForm, res);
            addressForm.region = [
              addressForm.province,
              addressForm.city,
              addressForm.area,
            ];
          }
        );
  }
});
</script>

<style scoped>
.address-add-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 头部导航样式 */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1px solid #eee;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
}

.arrow-left {
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

/* 表单区域样式 */
.form-container {
  background-color: #fff;
  margin-top: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.form-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #333;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  border: none;
  outline: none;
}

.form-value {
  flex: 1;
  font-size: 28rpx;
  color: #999;
}

.arrow-right::after {
  content: "";
  position: absolute;
  right: 30rpx;
  top: 50%;
  width: 16rpx;
  height: 16rpx;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  transform: translateY(-50%) rotate(45deg);
}

/* 底部按钮样式 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.save-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border: none;
  border-radius: 8rpx;
}

.form-select {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-select-text {
  font-size: 28rpx;
  color: #999;
}

.select-arrow {
  font-size: 24rpx;
  color: #999;
}

.location-btn {
  position: absolute;
  right: 32rpx;
  top: 30rpx;
  color: #0066ff;
  font-size: 28rpx;
}
.address-text {
  flex: 1;
  margin-right: 60rpx;
}
</style>
